<template>
  <div class="home-background">
    <div >
      <!--        头部-->
      <div class="header">
        <navbar class="home-nav">
          <div slot="left"><el-button type="text" class="location">杭州</el-button></div>
          <div slot="center">
            <el-button type="text" class="text">兴趣</el-button>
            <el-button type="text" class="text">推荐</el-button>
          </div>
          <div slot="right">
            <i class="el-icon-search top-icon"></i>
            <i class="el-icon-message top-icon"></i>
          </div>
        </navbar>
      </div>
      <div style="width: 100%;height: 44px"></div>
      <!--主内容-->
      <div class="main">
        <interestcard>
          <img src="../../../assets/img/jisoo2.png" slot="act-img">
          <p slot="act-name" class="act-name">灵感事务所</p>
          <p slot="time-lie" class="time-lie">2020.09.30-2020.12.31</p>
          <p slot="time-lie" class="time-lie">杭州  |  杭州天地二层L201</p>
          <div slot="type" class="type" style="border-color: #70B603;color: #70B603">音乐剧</div>
          <div slot="type" class="type" style="border-color: #EC808D;color: #EC808D">美国</div>
          <div slot="type" class="type" style="border-color: #F59A23;color: #F59A23">家庭</div>
          <div slot="act-peo" class="act-peo">101人已报名</div>
        </interestcard>
        <interestcard>
          <img src="../../../assets/img/jisoo2.png" slot="act-img">
          <p slot="act-name" class="act-name">灵感事务所</p>
          <p slot="time-lie" class="time-lie">2020.09.30-2020.12.31</p>
          <p slot="time-lie" class="time-lie">杭州  |  杭州天地二层L201</p>
          <div slot="type" class="type" style="border-color: #70B603;color: #70B603">音乐剧</div>
          <div slot="type" class="type" style="border-color: #EC808D;color: #EC808D">美国</div>
          <div slot="type" class="type" style="border-color: #F59A23;color: #F59A23">家庭</div>
          <div slot="act-peo" class="act-peo">101人已报名</div>
        </interestcard>
        <interestcard>
          <img src="../../../assets/img/jisoo2.png" slot="act-img">
          <p slot="act-name" class="act-name">灵感事务所</p>
          <p slot="time-lie" class="time-lie">2020.09.30-2020.12.31</p>
          <p slot="time-lie" class="time-lie">杭州  |  杭州天地二层L201</p>
          <div slot="type" class="type" style="border-color: #70B603;color: #70B603">音乐剧</div>
          <div slot="type" class="type" style="border-color: #EC808D;color: #EC808D">美国</div>
          <div slot="type" class="type" style="border-color: #F59A23;color: #F59A23">家庭</div>
          <div slot="act-peo" class="act-peo">101人已报名</div>
        </interestcard>
        <interestcard>
          <img src="../../../assets/img/jisoo2.png" slot="act-img">
          <p slot="act-name" class="act-name">灵感事务所</p>
          <p slot="time-lie" class="time-lie">2020.09.30-2020.12.31</p>
          <p slot="time-lie" class="time-lie">杭州  |  杭州天地二层L201</p>
          <div slot="type" class="type" style="border-color: #70B603;color: #70B603">音乐剧</div>
          <div slot="type" class="type" style="border-color: #EC808D;color: #EC808D">美国</div>
          <div slot="type" class="type" style="border-color: #F59A23;color: #F59A23">家庭</div>
          <div slot="act-peo" class="act-peo">101人已报名</div>
        </interestcard>
        <!--        <div class="interest-act">-->
        <!--          <img src="./assets/img/jisoo2.png">-->
        <!--          <div style="margin: 0;text-align: center">-->
        <!--            <div class="act-text">-->
        <!--              <p class="act-name">灵感事务所</p>-->
        <!--              <p class="time-lie">2020.09.30-2020.12.31</p>-->
        <!--              <p class="time-lie">杭州  |  杭州天地二层L201</p>-->
        <!--            </div>-->
        <!--            <div class="act-type">-->
        <!--              <div class="type" style="border-color: #70B603;color: #70B603">音乐剧</div>-->
        <!--              <div class="type" style="border-color: #EC808D;color: #EC808D">美国</div>-->
        <!--              <div class="type" style="border-color: #F59A23;color: #F59A23">家庭</div>-->
        <!--              <div class="act-peo">101人已报名</div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->

      </div>

      <!--        导航栏-->
      <div class="home-bar">
        <tabbar>
          <tabbarItem>
            <img slot="item-icon" src="../../../assets/img/tabbar/home_grey.png">
            <div slot="item-text">首页</div></tabbarItem>
          <tabbarItem>
            <img slot="item-icon" src="../../../assets/img/tabbar/find_grey.png">
            <div slot="item-text">发现</div></tabbarItem>
          <tabbarItem>
            <img slot="item-icon" src="../../../assets/img/tabbar/ground_grey.png">
            <div slot="item-text">广场</div></tabbarItem>
          <tabbarItem>
            <img slot="item-icon" src="../../../assets/img/tabbar/my_grey.png">
            <div slot="item-text">我的</div></tabbarItem>
        </tabbar>
      </div>

    </div>

  </div>
</template>

<script>
    import tabbar from "../../../components/tabbar/tabbar";
    import tabbarItem from "../../../components/tabbar/tabberItem";
    import navbar from "../../../components/nav-bar/nav-bar";
    import interestcard from "../../../components/home-interest-card/home-interest-card";

    export default {
      name: "home-interest",
      components: {
        tabbar,
        tabbarItem,
        navbar,
        interestcard
      }
    }
</script>

<style scoped>
  .home-background{
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    /*background-color: #F2F2F2;*/
  }

  .header{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
  }
  .home-nav{
    background-color: #B0E3FF;
    color: white;
  }
  .location{
    color: white;
    font-size: 16px;
    margin-left: 5px;
  }
  .text{
    color: white;
    font-size: 20px;
  }
  .top-icon{
    color: white;
    font-size: 26px;
    margin-right: 5px;
  }

  /*.interest-act{*/
  /*  width: 390px;*/
  /*  height: 330px;*/
  /*  background-color: white;*/
  /*  border-radius: 10px;*/
  /*  margin: 0 auto;*/
  /*  margin-top: 15px;*/
  /*  border: 1px;*/
  /*  border-color: #d7d7d7;*/
  /*  box-shadow: 0px 3px 3px rgb(240,240,240);*/
  /*}*/
  /*.interest-act img{*/
  /*  width: 360px;*/
  /*  height: 240px;*/
  /*  border-radius: 10px;*/
  /*  margin-left: 15px;*/
  /*}*/
  /*.act-text{*/
  /*  display: inline-block;*/
  /*  text-align: center;*/
  /*}*/
  /*.act-name{*/
  /*  color: #555555;*/
  /*  font-size: 16px;*/
  /*  font-weight: bold;*/
  /*  margin-top: 8px;*/
  /*  margin-bottom: 4px;*/
  /*}*/
  /*.time-lie{*/
  /*  color: #7f7f7f;*/
  /*  font-size: 12px;*/
  /*  margin-top: 0;*/
  /*  margin-bottom: 0;*/
  /*}*/
  /*.act-type{*/
  /*  display: inline-block;*/
  /*  text-align: center;*/
  /*  margin-left: 40px;*/
  /*  margin-top: 10px;*/
  /*}*/
  /*.type{*/
  /*  display: inline-block;*/
  /*  width: 40px;*/
  /*  height: 20px;*/
  /*  border-radius: 10px;*/
  /*  border: 1px solid;*/
  /*  border-color: #70B603;*/
  /*  font-size: 9px;*/
  /*  padding-top: 1px;*/
  /*  margin-left: 3px;*/
  /*}*/
  /*.act-peo{*/
  /*  color: #7f7f7f;*/
  /*  font-size: 15px;*/
  /*  margin-top: 10px;*/
  /*}*/

  .home-bar{
    position: fixed;
    bottom: 0;
  }
</style>
